<template>
  <div>
    <h1>统计</h1>
    <el-card class="flex-c mt-15">
      <div class="fcb" style="width: 100%">
        <div>
          <span>起始时间:</span>
          <el-date-picker
            class="ml-10"
            style="width: 360px"
            v-model="params.arrangeTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          />
        </div>
        <div class="ml-20">
          <span>图表类型:</span>
          <el-select v-model="params.type" placeholder="请选择" style="width: 240px" class="ml-10">
            <el-option
              v-for="item in chartTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button type="primary" class="ml-30" @click="querySearch">查询</el-button>
      </div>
    </el-card>
    <el-card class="mt-15">
      <v-chart class="chart" :option="option1" autoresize />
      <v-chart class="chart" :option="option2" autoresize />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { meetingRoomUsedCount, userBookingCount } from '@/api'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, watchEffect, watch } from 'vue'

defineOptions({
  name: 'dataStatistics'
})

/** 响应式数据 */
interface UserBookingData {
  userId: number
  username: string
  bookingCount: number
}
interface MeetingRoomUsedData {
  meetingRoomName: string
  meetingRoomId: number
  usedCount: string
}
enum ChartType {
  'bar' = 1,
  'pie'
}
const chartTypeList = [
  { label: '柱状图', value: ChartType['bar'] },
  { label: '饼状图', value: ChartType['pie'] }
]
const params = reactive<{ arrangeTime: string[]; type: ChartType }>({
  arrangeTime: ['2024-10-01', '2024-10-31'],
  type: ChartType['bar']
})

const option1 = ref({
  color: ['#ff7473', '#409eff'],
  title: {
    text: '用户预定情况',
    left: 'center'
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '预定次数',
      type: 'bar',
      data: [] as UserBookingData[],
      barWidth: 40,
      radius: '55%',
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: [5, 5, 0, 0],
        color: function (params: any) {
          const colorList = ['#ff7473', '#409eff']
          return colorList[params.dataIndex % colorList.length]
        }
      }
    }
  ]
})
const option2 = ref({
  color: ['#ff7473', '#409eff'],
  title: {
    text: '会议室使用情况',
    left: 'center'
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '使用次数',
      type: 'bar',
      data: [] as MeetingRoomUsedData[],
      barWidth: 40,
      radius: '55%',
      center: ['50%', '45%'],
      itemStyle: {
        borderRadius: [5, 5, 0, 0],
        color: function (params: any) {
          const colorList = ['#ff7473', '#409eff']
          return colorList[params.dataIndex % colorList.length]
        }
      }
    }
  ]
})
watch(
  () => params.type,
  (newVal) => {
    if (newVal) {
      option1.value.series[0].type = ChartType[newVal]
      option2.value.series[0].type = ChartType[newVal]
    }
  },
  {
    immediate: true
  }
)

/** Life Cycle */
onMounted(() => {
  querySearch()
})

/** Events */
const querySearch = () => {
  getUserBookingCount()
  getMeetingRoomCount()
}
const getUserBookingCount = async () => {
  try {
    const startTime = params.arrangeTime[0]
    const endTime = params.arrangeTime[1]
    const res = await userBookingCount(startTime, endTime)
    const { data } = res.data
    if (res.status === 201 || res.status === 200) {
      option1.value.xAxis.data = data.map((item: any) => item.username)
      option1.value.series[0].data = data.map((item: UserBookingData) => {
        return {
          name: item.username,
          value: item.bookingCount
        }
      }) as UserBookingData[]
    } else {
      ElMessage.error(data || '系统繁忙，请稍后再试')
    }
  } catch (error) {
    console.error(error)
  }
}
const getMeetingRoomCount = async () => {
  try {
    const startTime = params.arrangeTime[0]
    const endTime = params.arrangeTime[1]
    const res = await meetingRoomUsedCount(startTime, endTime)
    const { data } = res.data
    if (res.status === 201 || res.status === 200) {
      option2.value.xAxis.data = data.map((item: any) => item.meetingRoomName)
      option2.value.series[0].data = data.map((item: MeetingRoomUsedData) => {
        return {
          name: item.meetingRoomName,
          value: item.usedCount
        }
      }) as MeetingRoomUsedData[]
    } else {
      ElMessage.error(data || '系统繁忙，请稍后再试')
    }
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped>
.chart {
  min-height: 400px;
}
</style>
